<template>
  <div>
    <HeaderGuide>搜索</HeaderGuide>
    <!--搜索框-->
    <sousuo>
      <input type="text" v-model="searchStr" placeholder="请输入搜索的商家名">
    </sousuo>
<!--    <div class="div" v-if="searchStr == ''"></div>-->
    <div class="div">
      <div class="div1" v-for="(item,index) in results" :key="index" @click="goto">
        <!--商家图片-->
        <div>
          <img class="img1" :src="item.imges" >
        </div>
        <div>
          <!--商家具体信息-->
          <div>
            <img class="img2" :src="item.img">
            <a>{{item.name}}</a>
          </div>
          <div>
            <img class="img3" src="../MSite/images/pj.png">
            <span class="span3">{{item.score}}</span>
            <span>月售{{item.number}}</span>
            <span class="right">{{item.time}}分钟  {{item.distance}}km</span>
          </div>
          <div>
            <span>起送 ￥{{item.price}}</span>
            <span>配送 ￥{{item.distribution}}</span>
            <span>人均 ￥{{item.average}}</span>
          </div>
          <div>
            <span class="span1">{{item.text}}</span>
          </div>
          <div>
            <span class="span2">{{item.discount}}</span>
          </div>
        </div>
      </div>
    </div>

    <FooterGuide/>
  </div>
</template>

<script>
import FooterGuide from "../../components/FooterGuide/FooterGuide";
import HeaderGuide from "../../components/HeaderGuide/HeaderGuide";
import sousuo from "../../components/HeaderGuide/sousuo";

export default {
  name: 'Search',
  components:{
    FooterGuide,
    HeaderGuide,
    sousuo
  },
  data(){
    return{
      list:[],
      searchStr:''
    }
  },
  mounted() {
    this.$axios.get('/business').then( (result)=>{
      // console.log(result.data)
      this.list=result.data
    }).catch(function (err){
      // console.log(err)
    })
  },
  methods:{
    goto(){
      this.$router.push("/Shopping")
      // console.log(this.list)
      // this.$router.push({name:this.isurl1,params:{ss:this.list.sroce[index]}})
    }
  },
  computed:{
    results(){
      let list = this.list
      if (this.searchStr == ''){
        return list
      }
      console.log(list)
      let searchStr = this.searchStr.trim().toLowerCase()
      list = list.filter(function (ele){
        if (ele.name.toLowerCase().indexOf(searchStr) != -1){
          return ele
        }
      })
      return list
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .div{
    position: absolute;
    top: 70px;
    width: 100%;
  }
  a{
    font-size: 20px;
    font-family: 方正舒体;
    font-weight: bold;
  }
  span{
    font-size: 10px;
    color: #999999;
  }
  .span1{
    height: 10px;
    color: #f38d3c;
    background-color: #f3ebbc;
    border-radius: 3px;
  }
  .span2{
    color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 3px;
  }
  .span3{
    font-size: 15px;
    color: #f37a4c;
  }
  .right{
    position: absolute;
    right: 10px;
  }
  .div1{
    display: flex;
    margin-top: 15px;
    background-color: #f8f7f7;
    border-radius: 10px;
    height: 110px;
  }
  .img1{
    width: 80px;
    height: 70px;
    border-radius: 10px;
    margin: 5px;
  }
  .img2{
    width: 20px;
    height: 13px;
    border-radius: 5px;
    margin-top: 5px;
  }
  .img3{
    width: 11px;
    height: 11px;
  }
</style>
